<template>
  <common-card title="今日交易用户数" :value="numberFormat(orderUser)">
    <div ref="barChartRef" style="width: 100%; height: 100%"></div>
    <template #footer>
      <span>退货率</span>
      <span class="emphasis">{{ numberFormat(returnRate) }}</span>
    </template>
  </common-card>
</template>

<script lang="ts">
import CommonCard from "./CommonCard.vue"
export default {
  name: "TodayUsers",
  components: { CommonCard },
}
</script>
<script lang="ts" setup>
import { ref, onMounted, computed, watch } from "vue"
import * as echarts from "echarts"
import type { EChartsType } from "echarts"
import { useReportDataStore } from "@/stores/reportData"
import useFormat from "@/hooks/useFormat"

const { numberFormat, moneyFormat } = useFormat()
const reportDataStore = useReportDataStore()
const orderUser = computed(() => reportDataStore.reportData.orderUser)
const returnRate = computed(() => reportDataStore.reportData.returnRate)
const orderUserTrend = computed(() => reportDataStore.reportData.orderUserTrend)
const orderUserTrendAxis = computed(
  () => reportDataStore.reportData.orderUserTrendAxis
)

const barChartRef = ref()
let myTodayUsers: EChartsType

const myUsersChart = () => {
  return {
    xAxis: {
      // boundaryGap: false, // 两边不留空白
      // x轴数据
      data: orderUserTrendAxis.value,
    },
    yAxis: {
      show: false, // 不显示y轴及其标线
    },
    series: [
      {
        name: "实时订单数据",
        type: "bar",
        // 列表数据
        data: orderUserTrend.value,
      },
    ],
    // 图表在坐标中显示的位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    // 显示提示
    tooltip: {
      trigger: "axis",
      confine: true,
    },
  }
}

// 页面挂载完毕的时候要执行
onMounted(() => {
  myTodayUsers = echarts.init(barChartRef.value)
  // myTodayUsers.setOption(myUsersChart())

  // 当页面尺寸变化的时候，也需要变化
  window.addEventListener("resize", () => {
    myTodayUsers && myTodayUsers.resize()
  })
})
watch(orderUserTrend, () => {
  myTodayUsers.setOption(myUsersChart())
})
</script>

<style></style>
